<template>
  <view class="app-container owner-contract-page">
    <mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" class="list-wrapper">
      <view class="contract-list">
        <view class="contract-item" v-for="(item, index) in list" :key="item.id">
          <hxk-card>
            <template v-slot:header>
              <view class="header">
                <view class="title">
                  <dict-tag :options="dict.type.cooperation_type" :value="item.cooperationType"/>
                </view>
                <view class="status">
                  <dict-tag :options="dict.type.proprietor_contract_status" :value="item.contractStatus"/>
                </view>
              </view>
            </template>
            <template v-slot:body>
              <view class="body">
                <view class="address">{{ item.premisesAddress }}</view>
              </view>
            </template>
            <template v-slot:footer>
              <view class="footer">
                <!--状态为"已签署" "已终止" "已逾期" 才显示删除按钮-->
<!--                <view class="btn"-->
<!--                      v-if="[CONTRACT_STATUS.SIGNED, CONTRACT_STATUS.TERMINATED, CONTRACT_STATUS.OVERDUE].includes(list[index].contractStatus)">-->
<!--                  <u-button @click="del(list[index].proprietorContractId)" text="删除"></u-button>-->
<!--                </view>-->
                <view class="btn"
                      v-if="['2','3','4'].includes(list[index].contractStatus)">
                  <u-button @click="del(list[index].proprietorContractId)" text="删除"></u-button>
                </view>
                <view class="btn">
                  <u-button text="合同详情" @click="handleView(list[index])"></u-button>
                </view>
                <!--1.是电子签(contractType=== '3') 2.contractStatus==='1'(待签约)-->
                <view class="btn" v-if="item.contractStatus === '1'">
                  <u-button text="签约" @click="handleSign(list[index].proprietorContractId)"></u-button>
                </view>

              </view>
            </template>
          </hxk-card>
        </view>
      </view>
    </mescroll-body>
  </view>
</template>

<script>
import HxkCard from "@/components/hxk-card/index";
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins";
import {
  deleteOwnerContract,
  ownerContractList,
  ownerContractSigning,
  ownerEleContractPreview,
  tenantEleContractPreview
} from "@/api/mine/owner";
import {CONTRACT_STATUS, CONTRACT_TYPE, SIGNING_MODE} from "@/components/app-constant";

export default {
  computed: {
    CONTRACT_STATUS() {
      return CONTRACT_STATUS
    }
  },
  mixins: [MescrollMixin],
  components: {
    HxkCard
  },
  dicts: ['cooperation_type', 'proprietor_contract_status'],
  data() {
    return {
      list: []
    };
  },
  methods: {
    upCallback(page) {
      const data = {
        "pageNum": page.num,
        "pageSize": page.size
      }
      this.queryParams = {
        ...data,
        ...this.queryParams,
      }
      ownerContractList(this.queryParams).then(res => {
        this.mescroll.endBySize(res.rows.length, res.total)
        if (page.num === 1) this.list = [];
        let arr = res.rows;
        this.list = this.list.concat(arr);
      }).catch(() => {
        this.mescroll.endErr();
      })
    },
    del(id) {
      this.$modal.confirm('确定删除该合同吗？').then(() => {
        deleteOwnerContract(id).then(res => {
          this.$modal.msg('删除成功')
          this.mescroll.resetUpScroll()
        })
      })
    },
    handleView(item) {
      console.log(item)
      // 判断是电子合同还是纸质合同
      // 电子合同
      if (item.signingMode === SIGNING_MODE.ELECTRONIC) {
        const data = {
          proprietorContractId: item.proprietorContractId,
          redirectUrl: "pages/mine/owner/owner-contract/list"
        }
        ownerEleContractPreview(data).then(res => {
          const url = encodeURIComponent(res.data);
          // this.$tab.navigateTo(`/pages/common/webview/index?url=${url}`)

          this.$tab.navigateTo("/pagesFace/pages/webview/webview?url=" + url)
        })
      } else if (item.signingMode === SIGNING_MODE.PAPER) {
        console.log("纸质合同")
        // 跳转到纸质合同
        // pages/mine/owner/owner-contract/detail.vue
        this.$tab.navigateTo('/pages/mine/owner/owner-contract/detail?id=' + item.proprietorContractId)
      }

    },
    // 签约
    handleSign(proprietorContractId) {
      const data  = {
        proprietorContractId: proprietorContractId,
        redirectUrl: "/pages/mine/owner/owner-contract/list"
      }
      ownerContractSigning(data).then(res => {
        // 跳转到签约页面
        console.log("跳转地址" + res.data)
        const url = encodeURIComponent(res.data);
        //跳转法大大签约页面
        this.$tab.navigateTo("/pagesFace/pages/webview/webview?url=" + url)
        //

      })
    },
    viewDetail(id) {
      this.$tab.navigateTo('/pages/mine/owner/owner-contract/detail?id=' + id)
    }
  }
}
</script>

<style lang="scss">
.owner-contract-page {
  .contract-list {
    padding: 20rpx;

    .contract-item {
      margin-bottom: 20rpx;

      .header {
        display: flex;
        justify-content: space-between;

        .title {
          font-size: 32rpx;
          color: #111;
        }

        .status {
          font-size: 28rpx;
        }
      }

      .body {
        .cycle {
          font-size: 28rpx;
          color: #666;
          margin-top: 20rpx;
        }

        .address {
          font-size: 28rpx;
          color: #666;
          margin-top: 20rpx;
        }
      }

      .footer {
        display: flex;
        justify-content: flex-end;

        .btn {
          font-size: 28rpx;

          ::v-deep .u-button--info {
            border: none !important;
            color: #000000 !important;
          }
        }
      }

    }
  }

}

</style>